<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
    <link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

    


    <button type="button" class="btn btn-primary btn-lg player" data-toggle="modal" data-target="#videoModal" data-url="http://49.234.158.52:9091/education_api/download/download_video?filename=-4180957933253998324.mp4
">
        点击启动示例
      </button>

    <button type="button" class="btn btn-primary btn-lg player2" data-toggle="modal" data-target="#videoModal" data-url="../../data/video/Unity3d动作游戏全攻略游戏开发实战/456.mp4">
        点击启动示例2
    </button>

    <button type="button" class="btn btn-primary btn-lg player3"  data-url="../../education_api/download/download_video?filename=Unity3d动作游戏全攻略游戏开发实战/456.mp4">
        点击启动示例3
    </button>
      
      <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content" style="width: 690px;">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">111</h4>
            </div>
            <div class="modal-body">
                <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="none">
                    <source src="../../education_api/download/download_video?filename=02.java的垮平台原理.mp4"></source>
                    
                </video>
            </div>
          </div>
        </div>
      </div>

<script src="../js/jquery-3.5.0.js"></script>

<script src="../static/videojs/video.min.js"></script>
<script src="../static/bootstrap/bootstrap.min.js"></script>
<script>
    $(function () {
        let videoObj = videojs("myvideo");

        $(".player").on("click",function () {
            let vedioUrl = $(this).attr("data-url");
            // videojs("myvideo", {}, function(){
            //            this.src(vedioUrl);
            // });
            videoObj.ready(function (){
                this.src(vedioUrl);
            })
        });

        $(".player2").on("click",function () {
            let vedioUrl = $(this).attr("data-url");
            // videojs("myvideo", {}, function(){
            //     this.src(vedioUrl);
            // });
            videoObj.ready(function (){
                this.src(vedioUrl);
            })
        });

        $(".player3").on("click",function () {
            let vedioUrl = $(this).attr("data-url");
            // videojs("myvideo", {}, function(){
            //            this.src(vedioUrl);
            // });
            videoObj.ready(function (){
                this.src(vedioUrl);
            })

            $("#videoModal").modal("show");
        });

        $("#videoModal").find(".close").on("click",function (){
            videoObj.pause();
        })


});

</script>




</body>
</html>